<template>
  <div class="lists">
    <van-collapse v-model="activeNames">
      <van-collapse-item
        v-for="(item, index) in list"
        :title="item.title"
        :name="item.name"
        :key="index"
      >
        <div class="lists-content">
          <div @mouseleave="fn_close" v-for="(item1,index1) in item.items" :key="index1">
            <a :href ="item.links" class="lists-items" target="_blank" >
            <div class="icon-box" >
              <img :src="item1.iconSrc" alt="">
            </div>
            <p class="van-ellipsis title">{{item1.title}}</p>
            <van-icon name="more-o" class="more" @click="fn_operate(item1.itemsID)"/>
            <div class="operate" :class="'operate'+item1.itemsID">
              <p>修改</p>
              <p @click="fn_remove(item.id,item1.itemsID)">移除</p>
              <p @click="fn_close">关闭</p>
            </div>
          </a>
          </div>
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
// @ is an alias to /src
import instance from '../../api/request'
export default {
  name: 'Lists',
  data() {
    return {
      activeNames: [],
      list: {},
    }
  },
  methods: {
    async fn_getData() {
      let { data } = await instance.get('/collect')
      this.list = data
      for (let k of Object.keys(data)) {
        this.activeNames.push(k)
      }
    },
    fn_operate(index){
      document.querySelector('.operate'+index).style.display = 'block';
    },
    fn_close(){
      document.querySelectorAll('.operate').forEach(item => {
        item.style.display = 'none';
      })
    },
    async fn_remove(classId,itemsId){
      for (const [k,v] of Object.entries(this.list)) {
        console.log(k)
        if(v.classId == classId){
          let index = v.items.findIndex(item => {
            return item.itemsID == itemsId;
          })
          v.items.splice(index,1)
        }
        await instance.put('/collect/'+classId,JSON.parse(JSON.stringify(this.list)).k)
      }

      // this.fn_getData();
    }
  },
  created() {
    this.fn_getData();
  },
}
</script>
<style lang="less" scoped>
/deep/ .van-cell {
  background: #ddd;
  color: green;
  font-size: 24px;
  font-weight: 700;
}
.lists-content {
  // background: #f5f5f5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  .lists-items {
    border-radius: 4px;
    margin: 10px 0;
    background: transparent;
    box-sizing: border-box;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 112px;
    height: 112px;
    cursor: pointer;
    position: relative;
    &:hover {
      background: rgba(0,0,0,.3);
      font-weight: 700;
      .title {
        color: blue;
      }
      .more {
        color: #333;
      }
    }
    .icon-box {
      background: rgba(241,243,244,1);
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
      }
    }
    .title {
      width: 90%;
      text-align: center;
    }
    .more {
      position: absolute;
      top: 5px;
      right: 5px;
    }
    .operate {
      width: 100%;
      background: #fff;
      position: absolute;
      top: 10px;
      left: 0;
      display: none;
      p {
        width: 100%;
        padding: 5px 0;
        color: #333;
        &:hover {
          background: #ccc;
        }
      }
    }
  }
}
</style>
